<template>
	<view class="container">
		<view class="header">
			<text class="title">房租查询支付系统</text>
		</view>

		<view class="form-container">
			<view class="form-item">
				<text class="form-label">楼号：</text>
				<picker mode="selector" :range="buildings" @change="buildingChange">
					<view class="form-input">{{selectedBuilding || '请选择楼号'}}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">单元：</text>
				<picker mode="selector" :range="units" @change="unitChange">
					<view class="form-input">{{selectedUnit || '请选择单元'}}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">房号：</text>
				<picker mode="selector" :range="roomNumbers" @change="roomNumberChange">
					<view class="form-input">{{selectedRoomNumber || '请选择房号'}}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">房间：</text>
				<picker mode="selector" :range="rooms" @change="roomChange">
					<view class="form-input">{{selectedRoom || '请选择房间'}}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">密码：</text>
				<input class="form-input" type="password" v-model="password" placeholder="请输入密码" />
			</view>

			<button class="submit-btn" @click="handleLogin">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buildings: ['1号楼', '2号楼', '3号楼', '4号楼', '5号楼', '6号楼'],
				units: ['1单元', '2单元', '3单元', '4单元', '5单元'],
				roomNumbers: ['101', '102', '201', '202', '301', '302', '401', '402', '501', '502', '601', '602'],
				rooms: ['主卧', '次卧', '南中卧', '北卧', '厨房间', '大厅间', '大厅间大', '大厅间小'],
				selectedBuilding: '',
				selectedUnit: '',
				selectedRoomNumber: '',
				selectedRoom: '',
				password: ''
			}
		},
		methods: {
			buildingChange(e) {
				this.selectedBuilding = this.buildings[e.detail.value]
			},
			unitChange(e) {
				this.selectedUnit = this.units[e.detail.value]
			},
			roomNumberChange(e) {
				this.selectedRoomNumber = this.roomNumbers[e.detail.value]
			},
			roomChange(e) {
				this.selectedRoom = this.rooms[e.detail.value]
			},
			handleLogin() {
				if (this.password !== '17358') {
					uni.showToast({
						title: '密码错误',
						icon: 'none'
					});
					return;
				}

				// 模拟登录成功
				uni.showToast({
					title: '登录成功（模拟）',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/detail/detail?building=${this.selectedBuilding}&unit=${this.selectedUnit}&roomNumber=${this.selectedRoomNumber}&room=${this.selectedRoom}`
					});
				}, 1500);
			}
		}
	}
</script>

<style>
	/* 全局样式 */
	page {
		background-color: #f5f7fa;
	}

	.container {
		padding: 40rpx;
	}

	/* 头部样式 */
	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		font-size: 44rpx;
		font-weight: 500;
		color: #333;
	}

	/* 表单容器 */
	.form-container {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 表单项 */
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.form-label {
		width: 120rpx;
		font-size: 32rpx;
		color: #666;
	}

	.form-input {
		flex: 1;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #333;
	}

	/* 密码输入框 */
	.form-item input.form-input {
		font-size: 32rpx;
	}

	/* 统一placeholder样式 */
	.form-input::placeholder {
		font-size: 32rpx;
		color: #999;
	}

	/* 提交按钮 */
	.submit-btn {
		margin-top: 60rpx;
		width: 100%;
		background-color: #07c160;
		color: #fff;
		font-size: 34rpx;
		padding: 30rpx 0;
		border-radius: 8rpx;
		border: none;
		transition: all 0.2s ease;
	}

	.submit-btn:active {
		background-color: #06ad56;
		transform: scale(0.98);
	}

	/* Picker样式 */
	picker {
		width: 100%;
	}

	picker-view {
		height: 400rpx;
		background: #fff;
	}

	picker-view-column {
		font-size: 32rpx;
	}

	.picker-item {
		font-size: 32rpx;
		line-height: 80rpx;
		color: #333;
	}
</style>
